{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load sizeformat %}
{% load percentageformat %}

{% block title %}{% translate '资源统计列表' %}{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'reports/reports.css' %}">
{% endblock %}

{% block boby %}
    <div class="container-fluid d-flex flex-column h-100">
        <div class="d-flex px-3">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">{% translate '全部' %}</li>
              </ol>
            </nav>
{#            <p class="h5">资源分配统计</p>#}
        </div>
        <div class="d-flex px-3" style="flex: 1">
            <div style="width: 200px">
                <ul class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#center" aria-controls="center" aria-selected="true">{% translate '数据中心' %}</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#host_group" aria-controls="host_group" aria-selected="false">{% translate '宿主机组' %}</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#host" aria-controls="host" aria-selected="false">{% translate '宿主机' %}</a>
                  </li>
                </ul>
            </div>
            <div class="pl-lg-1 flex-grow-1">
              <div class="tab-content h-100">
                    <div class="card tab-pane fade show active  h-100" id="center" role="tabpanel" aria-labelledby="center-tab">
                        <table class="table">
                            <thead class="thead-light">
                            <tr>
                                <th>{% translate '数据中心' %}</th>
                                <th>{% translate '总物理cpu(/核)' %}</th>
                                <th>{% translate '总虚拟cpu(/核)' %}</th>
                                <th>{% translate '已分配cpu(/核)' %}</th>
                                <th>cpu{% translate '分配率' %}</th>
                                <th>{% translate '总内存' %}</th>
                                <th>{% translate '已使用内存' %}</th>
                                <th>{% translate '内存使用率' %}</th>
                                <th>{% translate '虚拟机数' %}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for c in centers %}
                                <tr>
                                    <td><a href="{% url 'reports:reports-center' id=c.id %}">{{c.name}}</a></td>
                                    <td>{{c.real_cpu}}</td>
                                    <td>{{c.vcpu_total}}</td>
                                    <td>{{c.vcpu_allocated}}</td>
                                    <td>{{c.vcpu_allocated | percentageformat:c.vcpu_total}}</td>
                                    <td>{{c.mem_total | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | percentageformat:c.mem_total}}</td>
                                    <td>{{c.vm_created}}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="card tab-pane fade show h-100" id="host_group" role="tabpanel" aria-labelledby="host_group-tab">
                        <table class="table">
                            <thead class="thead-light">
                            <tr>
                                <th>{% translate '宿主机组' %}</th>
                                <th>{% translate '数据中心' %}</th>
                                <th>{% translate '总物理cpu(/核)' %}</th>
                                <th>{% translate '总虚拟cpu(/核)' %}</th>
                                <th>{% translate '已分配cpu(/核)' %}</th>
                                <th>cpu{% translate '分配率' %}</th>
                                <th>{% translate '总内存' %}</th>
                                <th>{% translate '已使用内存' %}</th>
                                <th>{% translate '内存使用率' %}</th>
                                <th>{% translate '虚拟机数' %}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for c in groups %}
                                <tr>
                                    <td><a href="{% url 'reports:reports-group' id=c.id %}">{{c.name}}</a></td>
                                    <td>{{c.center__name}}</td>
                                    <td>{{c.real_cpu}}</td>
                                    <td>{{c.vcpu_total}}</td>
                                    <td>{{c.vcpu_allocated}}</td>
                                    <td>{{c.vcpu_allocated | percentageformat:c.vcpu_total}}</td>
                                    <td>{{c.mem_total | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | percentageformat:c.mem_total}}</td>
                                    <td>{{c.vm_created}}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="card  tab-pane fade show h-100 " id="host" role="tabpanel" aria-labelledby="host-tab">
                        <table class="table">
                            <thead class="thead-light">
                            <tr>
                                <th>{% translate '宿主机IP地址' %}</th>
                                <th>{% translate '机组' %}</th>
                                <th>{% translate '物理cpu(/核)' %}</th>
                                <th>{% translate '虚拟cpu(/核)' %}</th>
                                <th>{% translate '已分配cpu(/核)' %}</th>
                                <th>cpu{% translate '分配率' %}</th>
                                <th>{% translate '总内存' %}</th>
                                <th>{% translate '已使用内存' %}</th>
                                <th>{% translate '内存使用率' %}</th>
                                <th>{% translate '虚拟机数' %}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for c in hosts %}
                                <tr>
                                    <td>{{c.ipv4}}</td>
                                    <td>{{c.group__name}}</td>
                                    <td>{{c.real_cpu}}</td>
                                    <td>{{c.vcpu_total}}</td>
                                    <td>{{c.vcpu_allocated}}</td>
                                    <td>{{c.vcpu_allocated | percentageformat:c.vcpu_total}}</td>
                                    <td>{{c.mem_total | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | sizeformat:'GB'}}</td>
                                    <td>{{c.mem_allocated | percentageformat:c.mem_total}}</td>
                                    <td>{{c.vm_created}}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
              </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $("#nav_reports").addClass("active");
    </script>
{% endblock %}
